<template>
    <UxDialog :visible="!!value" :title="!loading && table.length == 0 ? '': 'Packaging bags'" :class="{synchronize:$route.path.indexOf('synchronize') >=0}" @close="onClose()">

        <div class="scroll-init" v-if="loading">
            <p v-loading="true"></p>
        </div>

        <div class="scroll-nodata" v-else-if="table.length == 0">
            <div class="dialog-empty-banner">
                <img src="https://img.podpartner.com/static/images-20230202/brand/package-icon.png">
                <h2>Create an Attractive Branded <br> Packaging Bag</h2>
            </div>
            <div class="dialog-empty-bring">
                <h2>Why your clothing brand needs a customized packaging bag</h2>
                <ul>
                    <li>
                        <figure style="background-color:#DCEBDD"><img src="https://img.podpartner.com/static/images-20230202/brand/package-bring-1.png"></figure>
                        <p>Presenting your product with an impressive, branded packaging bag is significant for building a strong brand image.</p>
                    </li>
                    <li>
                        <figure style="background-color:#DCDDEB"><img src="https://img.podpartner.com/static/images-20230202/brand/package-bring-2.png"></figure>
                        <p>A unique packaging bag wins your customer within seconds by offering a memorable and sharable unboxing experience.</p>
                    </li>
                    <li>
                        <figure style="background-color:#EBE5DC"><img src="https://img.podpartner.com/static/images-20230202/brand/package-bring-3.png"></figure>
                        <p>Thoughtful packaging details help ensure customer satisfaction, which is the key to customer retention.</p>
                    </li>
                </ul>
                <p>
                    <svg-icon name="notify" />
                    By clicking this button, you will leave the current page with unsaved changes.
                </p>
                <nuxt-link to="/branding/package">Create packaging bag</nuxt-link>
            </div>
        </div>

        <template v-else>
            <div class="table" v-loading="loading">
                <table>
                    <thead>
                        <th>Preview</th>
                        <!-- <th>Info</th> -->
                        <th>Designs</th>
                        <th>Price</th>
                        <!-- <th>Linked product(s)</th> -->
                        <!-- <th>Linked store(s)</th> -->
                        <th>Link</th>
                    </thead>

                    <tbody>
                        <tr v-for="(item) in table" :key="item.id">
                            <td class="table-model">
                                <BrandingThumbPreview :pieces="item.design_list" :models="item.model_img" type="pack" />
                                <p v-text="item.template_name"></p>
                            </td>
                            <td class="table-artwork">
                                <UxPopper>
                                    <strong>Artwork</strong>
                                    <BrandingPiecesPreview slot="pop" :pieces="item.design_list" effect="popper" />
                                </UxPopper>
                            </td>
                            <td>
                                <CommonLevelDiscount :level="userInfo.level" :price="item.total_price" type="unit|discount|icon" />
                            </td>
                            <td>
                                <div class="table-select" :class="{active:item.id == active}" @click="active = item.id"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
            <div class="scroll-button">
                <button @click="onClose()">Cancel</button>
                <button type="primary" @click="doSave()" :disabled="active == value.id">Save</button>
            </div>
        </template>

    </UxDialog>
</template>
<script>
import { mapGetters, mapState } from "vuex";

export default {
    name: "HangTagSelect",
    props: {
        value: { type: Object, default: null },
    },
    data () {
        return {
            loading: true,
            active: 0,
            form: {
                page_num: 1,
                page_size: 10,
                total: 0,
            },
            table: [],
        };
    },
    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
        visible: {
            get () {
                return !!this.value;
            },
            set (v) {
                this.$emit("input", v);
            },
        },
    },
    methods: {

        async doSave () {
            if (this.active == this.value.tag_design_id) {
                // 相同的，不管
                this.$emit('input', null);
            } else {
                // 有变更
                const item = this.table.filter(item => item.id == this.active)[0]
                item && this.$emit('update', item)
            }
        },

        // 对话框显示时
        async getData () {

            this.loading = true;
            let response = await this.$http("BrandPackage.search", this.form);
            if (response.code === 0) {

                const table = [];
                (response.data || []).map(item => {
                    item.shop_list = item.shop_list || []
                    try {
                        item.design_list = JSON.parse(item.design_list || '[]');
                        item.design_list.map(piece => piece.layers = JSON.parse(piece.layers || '[]'))
                        item.model_img = JSON.parse(item.model_img || '[]');
                    } catch (error) {
                        // console.log(error)
                    }
                    item.state == 2 && table.push(item);
                })

                this.table = table;
                this.loading = false;
            } else {
                this.loading = false;
                this.$uxMessage.error(response.msg || "error");
                // 提示
            }
        },

        // 关闭
        onClose () {
            this.value && this.$emit("input", null);
        },


    },
    created () {
        this.active = (this.value || {}).id;
        this.loading = true;
        this.getData();
    },
    mounted () { },
};
</script>
<style lang="scss" scoped>
.dialog-layout {
    &::v-deep .dialog-body {
        width: calc(100vw - 80px);
        height: calc(100vh - 80px);
        max-width: 856px;
        max-height: 800px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    &.synchronize::v-deep > .dialog-content {
        .scroll-nodata .dialog-empty-bring > p {
            display: flex;
        }
    }
}

.scroll-init,
.scroll-nodata,
.table {
    box-sizing: border-box;
    flex: 1;
}

.table {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 24px 24px;
    overflow: auto;
    table {
        margin-top: 20px;
        width: 100%;
        border-collapse: collapse;
        thead {
            height: 36px;
            line-height: 36px;
            font-size: 14px;

            color: #000000;
            white-space: nowrap;
            th {
                position: relative;
                background: #f0f0f0;
                text-align: center;
                font-weight: normal;
                padding: 0;
                font-weight: bold;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 1px;
                    height: 22px;
                    background: #d8d8d8;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
                &:first-child {
                    border-radius: 2px 0 0 2px;
                }
                &:last-child {
                    border-radius: 0 2px 2px 0;
                    &::before {
                        display: none;
                    }
                }
            }
        }
        tbody {
            td {
                padding: 12px;
                text-align: center;
                border-bottom: 1px solid #ddd;
                .level-discount {
                    line-height: 24px;
                    font-size: 14px;
                    font-weight: normal;
                    white-space: nowrap;

                    img {
                        height: 24px;
                        margin-right: 4px;
                    }
                }

                & > .popper {
                    display: inline-block;
                }
            }
        }
    }
    .table-select {
        position: relative;
        cursor: pointer;
        display: inline-block;
        border-radius: 20px;
        font-size: 0;
        width: 20px;
        height: 20px;
        border: 2px solid #999999;
        &:hover {
            border-color: #ea4c89;
        }
        &.active {
            border-color: #ea4c89;
            &::before {
                content: '';
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 12px;
                height: 12px;
                border-radius: 12px;
                background: #ea4c89;
            }
        }
    }

    .table-model {
        width: 160px;
        & > p {
            margin: 8px 0;
            position: relative;
            overflow: hidden;
            white-space: normal;
            word-break: break-word;
            line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
        }
    }

    .table-artwork {
        .popper strong {
            text-decoration: underline;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            &:hover {
                color: #ea4c89;
            }
        }
    }
}

.scroll-button {
    padding: 24px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    button {
        box-sizing: border-box;
        width: 180px;
        margin: 0 8px;
    }
}

.scroll-init {
    flex: 1;
    position: relative;
    display: flex;

    p {
        width: 100%;
        position: relative;
    }

    &::v-deep .el-loading-mask {
        background: none;
    }
}

.scroll-nodata {
    flex: 1;
    overflow: auto;

    padding: 36px 28px;
    .dialog-empty-banner {
        background: #f6f6f6;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 36px 0 40px;
        img {
            width: 76px;
            height: 76px;
        }

        h2 {
            margin-top: 20px;
            font-size: 28px;
            font-weight: bold;
            color: #000000;
            line-height: 34px;
            text-align: center;
        }
        button {
            margin-top: 20px;
            border-radius: 6px;
            width: 174px;
            font-size: 14px;
            white-space: nowrap;
            height: 40px;
        }
    }

    .dialog-empty-bring {
        margin-top: 32px;
        h2 {
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            line-height: 22px;
            text-align: center;
        }
        ul {
            display: flex;
            margin: 18px -11px 0;
        }
        li {
            max-width: 252px;
            flex: 1;
            margin: 0 11px;
            background: #ffffff;
            border-radius: 6px;
            border: 1px solid #ebebeb;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            figure {
                width: 100%;
                height: 120px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 80px;
                    height: 80px;
                }
            }

            p {
                flex: 1;
                background: #f6f6f6;
                border-radius: 0px 0px 6px 6px;
                padding: 6px 16px;
                box-sizing: border-box;
                font-size: 14px;
                color: #000000;
                line-height: 22px;
                font-weight: normal;
            }
        }
        & > p {
            margin-top: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            display: none;
            svg {
                margin-right: 4px;
                width: 16px;
                height: 16px;
                background: #f44336;
                color: #fff;
                border-radius: 16px;
            }
            font-size: 14px;
            color: #f44336;
            line-height: 16px;
        }
        & > a {
            margin: 24px auto 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 252px;
            height: 40px;
            background: #ea4c89;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            line-height: 16px;
            &:hover {
                background: #c94175;
                color: #ffffff;
            }
        }
    }
}
</style>
